import React, {Component} from 'react'
import {Image, StyleSheet} from 'react-native'

import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator, BottomTabBar} from 'react-navigation-tabs';

// import home from '../pages/home';
import HomeRootStack from './HomeStackNavigator'
import find from '../pages/find';
import nearby from '../pages/nearby';
import mine from '../pages/mine';

// 底部导航
const TABS = {
  home: {
    screen: HomeRootStack,
    navigationOptions: {
      tabBarLabel: '首页',
      tabBarIcon: ({focused})=>{
        if(!focused){
          return <Image source={require('./../assets/tab/icon_tabbar_homepage.png')}  style={styles.bottomTabIconStyle}/>
        }else {
          return <Image source={require('./../assets/tab/icon_tabbar_homepage_selected.png')}  style={styles.bottomTabIconStyle}/>
        }
      }
    }
  },
  find: {
    screen: find,
    navigationOptions: {
      tabBarLabel: '发现',
      tabBarIcon: ({focused})=>{
        if(!focused){
          return <Image source={require('./../assets/tab/icon_tabbar_misc.png')}  style={styles.bottomTabIconStyle}/>
        }else {
          return <Image source={require('./../assets/tab/icon_tabbar_misc_selected.png')}  style={styles.bottomTabIconStyle}/>
        }
      }
    }
  },
  nearby: {
    screen: nearby,
    navigationOptions: {
      tabBarLabel: '附近',
      tabBarIcon: ({focused})=>{
        if(!focused){
          return <Image source={require('./../assets/tab/icon_tabbar_nearby_normal.png')}  style={styles.bottomTabIconStyle}/>
        }else {
          return <Image source={require('./../assets/tab/icon_tabbar_nearby_selected.png')}  style={styles.bottomTabIconStyle}/>
        }
      }
    }
  },
  mine: {
    screen: mine,
    navigationOptions: {
      tabBarLabel: '我的',
      tabBarIcon: ({focused})=>{
        if(!focused){
          return <Image source={require('./../assets/tab/icon_tabbar_mine.png')}  style={styles.bottomTabIconStyle}/>
        }else {
          return <Image source={require('./../assets/tab/icon_tabbar_mine_selected.png')}  style={styles.bottomTabIconStyle}/>
        }
      }
    }
  }
};

class MainTabNavigator extends Component{
  _tabNavigator(){
    const {home, find, nearby, mine} = TABS
    const  tabs = {home, find, nearby, mine};
    if(!this.tabNavigator){
      this.tabNavigator = createAppContainer(createBottomTabNavigator(
        tabs, {
          tabBarComponent: props => (
            <BottomTabBar {...props} activeTintColor='rgb(62, 187, 175)'/>
          ),
        }
      ))
    }
    return this.tabNavigator;
  }
  render(){
    const TabNavigator = this._tabNavigator();
    return <TabNavigator/>
  }
}
const styles = StyleSheet.create({
  bottomTabIconStyle: {
    width: 30,
    height: 30
  }
});

export default  MainTabNavigator
